<template>
  <div class="app-container">
    <div class="top-center" style="margin-bottom:20px;">
      <div class="item">
        <el-button icon="el-icon-arrow-left" class="back" @click="$router.back()"></el-button>
      </div>

      <div class="item">
        <el-input v-model="title" disabled></el-input>
      </div>

      <div class="item">
        <el-button
          style=" background: #00BFD6; color: #FFFFFF; "
          @click="handleDownload"
          :loading="downloadLoading"
        >导出</el-button>
      </div>
    </div>
    <el-table
      :data="tableData"
      border
      element-loading-text="Loading"
      fit
      highlight-current-row
      style="width:100%;  overflow: hidden;"
    >
      <el-table-column type="index" label="序号" width="60"></el-table-column>
      <el-table-column prop="work_name" label="作品名称" min-width="220"></el-table-column>
      <el-table-column prop="username" label="评委名称" min-width="220"></el-table-column>
      <el-table-column prop="account" label="评委账号" min-width="300"></el-table-column>
      <el-table-column prop="status" label="评审结果" min-width="300" v-if=" level == 0  ">
        <template
          slot-scope="scope"
          v-if=" level == 0  "
        >{{scope.row.results_status ==0 ?"淘汰":"入围" || '-' }}</template>
      </el-table-column>
      <el-table-column prop="star" label="评审结果" min-width="100" v-if=" level == 1">
        <template slot-scope="scope">{{scope.row.star }}星</template>
      </el-table-column>
      <el-table-column prop="overallScore" label="总评分" width="100" v-if=" level == 2">
        <template
          slot-scope="scope"
          v-if="scope.row.scores &&  scope.row.scores.length>0"
        >{{scope.row.scores[0] +scope.row.scores[1]+scope.row.scores[2] }}</template>
      </el-table-column>
      <el-table-column label="维度一评分" min-width="100" v-if=" level == 2">
        <template
          slot-scope="scope"
          v-if="scope.row.scores &&  scope.row.scores.length>0"
        >{{scope.row.scores[0] || '-' }}</template>
      </el-table-column>
      <el-table-column label="维度二评分" min-width="100" v-if=" level == 2">
        <template
          slot-scope="scope"
          v-if="scope.row.scores &&  scope.row.scores.length>0"
        >{{scope.row.scores[1]|| '-' }}</template>
      </el-table-column>
      <el-table-column label="维度三评分" min-width="100" v-if=" level == 2">
        <template
          slot-scope="scope"
          v-if="scope.row.scores &&  scope.row.scores.length>0"
        >{{scope.row.scores[2] || '-' }}</template>
      </el-table-column>
      <el-table-column prop="comment" label="评语" min-width="400" v-if="level==1  ||   level == 2"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import {
  getReviewThirdList,
  getReviewSecondaryList,
  getReviewFirstList,
  getWork_first_export,
  getWork_secondary_export,
  getWork_third_export
} from "@/api/works";
import axios from "axios";
export default {
  name: "Detail",

  data() {
    return {
      activity_id: "",
      work_id: "",
      title: "",
      level: 0,
      downloadLoading: false,
      tableData: [],
      downloadUrl: null,
      filename: "",
      downloadLoading: false
    };
  },

  watch: {
    $route: "fetchData" // 监听路由变化
  },
  //  created() {
  //     // 在组件创建时获取参数
  //     this.activity_id = this.$route.query.activity_id;
  //     this.title = this.$route.query.title;
  //      this.filename = `${this.$route.query.title}.xlsx`;
  //     this.work_id = this.$route.query.work_id;
  //     this.level = this.$route.query.level;
  //     console.log(this.level);
  //     this.fetchData();
  //   },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      this.activity_id = this.$route.query.activity_id;
      this.title = this.$route.query.title;
      this.filename = `${this.$route.query.title}.xlsx`;
      this.work_id = this.$route.query.work_id;
      this.level = this.$route.query.level;
      this.fetchData();
    },
    fetchData() {
      this.listLoading = true;
      if (this.level == 0) {
        getReviewFirstList({ work_id: this.work_id }).then(response => {
          this.tableData = response.list;
          this.listLoading = false;
        });
      } else if (this.level == 1) {
        getReviewSecondaryList({ work_id: this.work_id }).then(response => {
          this.tableData = response.list;
          this.listLoading = false;
        });
      } else if (this.level == 2) {
        getReviewThirdList({ work_id: this.work_id }).then(response => {
          response.list.forEach(item => {
            if (item.scores) {
              let scoresNew = item.scores.split(",");
              item.scores = scoresNew.map(score => parseInt(score, 10));
            }
          });
          this.tableData = response.list;
          this.listLoading = false;
        });
      }
    },
    async handleDownload() {
      this.downloadLoading = true;
      this.$message("正在导出，请稍等...");
      let params = {};
      params.work_id = this.work_id;

      let url = "";
      if (this.level == 0) {
        url = `${process.env.VUE_APP_BASE_API}api/works/work_first_export?work_id=${params.work_id}`;
      } else if (this.level == 1) {
        url = `${process.env.VUE_APP_BASE_API}api/works/work_secondary_export?work_id=${params.work_id}`;
      } else if (this.level == 2) {
        url = `${process.env.VUE_APP_BASE_API}api/works/work_third_export?work_id=${params.work_id}`;
      }

      try {
        const response = await axios.get(url, {
          headers: {
            "X-token": ` ${this.$store.getters.token || ""}`
          },
          responseType: "blob" // 设置响应类型为 Blob
        });

        // 将响应数据转换为 Blob
        const blob = new Blob([response.data], {
          type: response.headers["content-type"] || "application/octet-stream"
        });

        // 生成 Blob URL
        this.downloadUrl = URL.createObjectURL(blob);

        // 创建一个隐藏的下载链接并触发点击事件
        const link = document.createElement("a");
        link.href = this.downloadUrl;
        link.download = this.filename;
        link.style.display = "none";
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);

        // 清除 Blob URL
        URL.revokeObjectURL(this.downloadUrl);

        // // 提示用户文件正在下载
        this.$message.success("导出成功");
      } catch (error) {
        console.error("Error downloading:", error);
        alert("导出失败，请重试！");
      } finally {
        this.downloadLoading = false;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.top-center {
  width: 100%;
  display: flex;
  align-items: center;
  .item {
    width: auto;
    margin-right: 20px;
  }
}
::v-deep .el-input {
  width: 400px;
}
.back {
  font-weight: bold;
  font-size: 20px;
  padding: 10px 12px;
  color: #0cc3d8;
}
</style>